<template>
    <div id="progress-loop" ref="chartDom" style="width: 100%;height: 100%"></div>
</template>
  
  <script setup lang="ts" name="dataScreen">
  import { watch,ref,onMounted, onBeforeUnmount, reactive, nextTick } from 'vue'
  import { debounce } from "@/utils";
  import { countSize } from "@/utils/utils";
  import * as echarts from 'echarts';
  const chartDom = ref();
  
  const props = defineProps({
    planData: {
      type: Array,
      default: [],
    },
    text:{
      type: String,
      default: '',
    }
  })
  watch(() => props.planData, (value) => {
    console.log('value',value)
    initChart();
  }, { deep: true });
    let myChart = null;
    const rawData = [
        [1000, 2000],
        [320, 1000],
    ];
    const totalData = [];
    for (let i = 0; i < rawData[0].length; ++i) {
        let sum = 0;
        for (let j = 0; j < rawData.length; ++j) {
            sum += rawData[j][i];
        }
        totalData.push(sum);
    }
    const grid = {
        left: 100,
        right: 100,
        top: 50,
        bottom: 50
    };
    const series = [
        'Direct',
        'Mail Ad'
    ].map((name, sid) => {
        return {
            name,
            type: 'bar',
            stack: 'total',
            barWidth: '60%',
            label: {
            show: true,
            formatter: (params) =>{
                // console.log( params.value,'测试',totalData[params.dataIndex],'等于',params.value / totalData[params.componentIndex])
                return Math.round(params.value / totalData[params.dataIndex]*100)  + '%'
            } 
            },
            data: rawData[sid]
        };
    });
    const Option = computed(() => {
      return {
        title:{
            text: props.text,
            textStyle: {
                //图例文字的样式
                fontSize: countSize(.14),
                color: "#fff",
            },
            left: "left",
            top: "0",
        },
        legend: {
            selectedMode: true,
            right: "right",
            textStyle: {
                    color: '#fff',
                },
        },
        grid,
        yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
        },
        xAxis: {
            type: 'category',
            axisLine: {
                lineStyle: {
                    color: '#fff',
                }
            },
            data: ['制程', '来料']
        },
            series
        };
    })
    const initChart = () => {
      myChart.setOption(Option.value);
    };
    const resizeChart = () => {
      myChart.resize();
      initChart()
    };
    const resizeHandler = debounce(resizeChart, 100);
    onMounted(() => {
      nextTick(() => {
        myChart = echarts.init(chartDom.value);
        initChart();
      });
      window.addEventListener("resize", resizeHandler);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", resizeHandler);
      myChart.dispose();
    });
  </script>
  